<div class={$$props.class}>
	<a href="https://discord.gg/Gd8vfvxpsD" target="_blank" rel="noreferrer" class="hide-thin">
		<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 127.14 96.36">
			<path
				fill="currentcolor"
				d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
			/>
		</svg>
	</a>
	<a href="https://www.github.com/HoudiniGraphQL/houdini" target="_blank" rel="noreferrer">
		<svg height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.58 31.77" class="gh-link"
			><defs><style></style></defs><g id="Layer_2" data-name="Layer 2"
				><g id="Layer_1-2" data-name="Layer 1"
					><path
						fill="currentcolor"
						class="cls-1"
						d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.82.15,1.11-.36,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.36,4.36,0,0,0-1.81-2.39c-1.47-1,.12-1,.12-1a3.43,3.43,0,0,1,2.49,1.68,3.48,3.48,0,0,0,4.74,1.36,3.46,3.46,0,0,1,1-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3,6.3,0,0,1,1.67-4.37,5.94,5.94,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.41,15.41,0,0,1,8.16,0c3.11-2.11,4.47-1.67,4.47-1.67A5.91,5.91,0,0,1,25,11.07a6.3,6.3,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.85,3.85,0,0,1,1.11,3c0,2.18,0,3.94,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z"
					/></g
				></g
			>
		</svg>
	</a>
</div>

<style>
	div {
		display: flex;
		flex-direction: row;
		gap: 20px;
		align-items: center;
	}

	div a {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #979aa6;
	}

	a:hover {
		color: white;
	}

	@media (max-width: 400px) {
		.hide-thin {
			display: none;
		}
	}
</style>
